 <template>
	<!-- <div class="loading-circle"></div>
 -->
	<!-- <div class="loading-step">
		<div class="bar">
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
		</div>
	</div> -->
    <div class="loadingBody">
        <div class="loading_container">
            <div class="loading-step-circle">
                <div class="bar">
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                </div>
            </div>
            <span>加载中...</span>
        </div>
    </div>
    
</template>

<script>
    export default {
        name: "loading",
    	data(){
            return{
                positionY: 0,
                timer: null,
            }
        },
        mounted(){
        	this.timer = setInterval(() => {
        		this.positionY ++;
        	}, 600)
        },
        beforeDestroy(){
        	clearInterval(this.timer);
        }
    }
</script>

<style lang="scss" >
   
    .loading_container{
    	position: fixed;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
        span{
            color: #999;
        }
    }
    .loading-circle{
	width:50px;
	height:50px;
	border:5px solid;
	border-color:#333 #333 transparent;
	border-radius:50%;
	animation:loading-circle 1s linear both infinite;
}
 
 
@keyframes loading-circle{
			0%{transform:rotate(0);}
			100%{transform:rotate(360deg);}
        }
    .loadingBody{
        position: absolute;;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }
	.loading-step{
			width:95px;
			height:40px;
			font-size:0;
			overflow:hidden;
			white-space:nowrap;
			margin-top:20px;
			vertical-align:middle;
			
		}
		.loading-step i{
			display:inline-block;
			width:10px;
			height:10px;
			background-color:#999;
			border-radius:50%;
			margin-right:10px;
		}
		.loading-step .bar{
			line-height:40px;
			animation:loading-step 1.5s steps(5,end) both infinite;
		}
		.loading-step i:nth-child(6){
			transform:scale(1.5);
			background-color:#333;
		}
		@keyframes loading-step{
			0%{transform:translate(-100px);};
			80%,100%{transform:translate(0);}
		}


		.loading-step-circle{
			width:40px;
			height:40px;
			font-size:0;
			overflow:hidden;
			vertical-align:middle;
			animation:loading-circle 1s linear both infinite;
			
		}
		.loading-step-circle i{
			display:inline-block;
			width:10px;
			height:10px;
			background-color:#999;
			border-radius:50%;
			margin:5px;
		}
		.loading-step-circle .bar{
			width: 40px;
			/*animation:loading-step 1.5s steps(5,end) both infinite;*/
		}
		
		@keyframes loading-step-circle{
			0%{transform:translate(-100px);};
			80%,100%{transform:translate(0);}
		}
    
    /* mint-loadmore-spinner mint-spinner-fading-circle circle-color-48    span mint-loadmore-text*/ 
</style>
